<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        /* *{
            padding: 0;
            margin: 0;
        }
    div{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        top: 50px;
    } */
    div{
        padding: 30px;
    }
    div.box1{
        background: red;
    }
    div.box2{
        background: green;
    }
    div.box3{
        background: yellow;
    }
    </style>
    
    <div class="box1">
        <div class="box2">
            <div class="box3">
        </div>
    </div>
    <button>++++</button>
    
    <script>
        var c = console.log.bind(document)
        // var  odiv =document.getElementsByTagName('div')[0]
        // odiv.onclick=function(evn){
        //     // evn 属于自定义,获取内置参数
        //     // var ev = window.event||evn
        //     var ev = window.event || evn
        //     c(ev)
        //     c(ev.shiftKey)
        //     c(ev.ctrlKey)
        //     c(ev.altKey)
        //     c(ev.target)
        //     c(ev.type)
            
        //     // 获取位置
        //     c(ev.pageX)
        //     c(ev.pageY)
        //     c(ev.clientX)
        //     c(ev.clientY)
        //     c(ev.screenX)
        //     c(ev.screenY)
        //     事件对象存储了一些鼠标的信息和对事件相关的事件,内置event事件对象
        //     兼容写法: var ev = window.event || evn
        //     evn是通过形参传递的,内置于实参中,自定义名字

        //     事件流
        //         事件触发的时候,事件会在元素节点和根节点按特定顺序传播的就是DOM事件流
        //     DOM事件流的三个阶段
        //         捕获阶段: document-html-body-div-span   由外到内
        //         确认事件: 确定事件目标  
        //         冒泡事件: span-div-body-html-document   由内到外

        //     标准浏览器和ie浏览器绑定事件的区别
        //         标准事件属性不用加on,IE要加on
        //         标准是顺序,IE是倒序
        //         标准的this指向触发事件的元素,IE的this指向window
        //         标准的可以捕获,IE不可以捕获
        // }

        // var odiv1=document.querySelector('.box1')
        // var odiv2=document.querySelector('.box2')
        // var odiv3=document.querySelector('.box3')
        // odiv1.addEventListener('click',fn1,true)
        // odiv2.addEventListener('click',fn2,true)
        // odiv3.addEventListener('click',fn3,true)
        
        // function fn1(){c("box1")}
        // function fn2(){c("box2")}
        // function fn3(){c("box3")}
        // // 捕获阶段: document-html-body-odiv1-odiv2-odiv3
        // // 点击上面的触发下面的就是事件捕获  

        // var odiv1=document.querySelector('.box1')
        // var odiv2=document.querySelector('.box2')
        // var odiv3=document.querySelector('.box3')
        // odiv1.onclick = function(){c('box1')}
        // odiv2.onclick = function(){c('box2')}
        // odiv3.onclick = function(){c('box3')}
        // 冒泡阶段: odiv3-odiv2-odiv1-body-html-document
        // 点击子元素触发父元素行为就是事件冒泡

            // onclick dianji
            // onmouseover shijianhuashang
            // onmouseleave shijianhuali
            // onmouseout shubiaoyichu
            // onmouseenter shubiaoyiru
            // onmousedown shubiaoanxia
            // ondblclick shubaioshuangji
            // onmousemove shubiaoyidong

        window.onresize=function(){
            console.log(document.documentElement.clientWidth);
            c('hello')
        }
        var btn = document.getElementsByTagName('button')[0]
        var a  = document.documentElement.clientWidth
        btn.onclick = function (){
            
            a++
            a+=2
            c(a)
            document.documentElement.clientWidth=a
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientWidth+=2);
        }
</script>
</body>
</html>